<template>
  <div>
    <div class="table_card" v-loading="loading">
      <div class="table_card_top">
        <span class="pl_left"></span>
        <div class="rules_title">客量完成率</div>
      </div>
      <div class="table_card_header">
        <span class="pl_left"></span>
        <div class="rules_title"></div>
      </div>
      <div class="Parameter_form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          label-position="top" 
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="基础分值" prop="confBasic">
                <div class="comeBox">
                  <div class="comeOn">
                    <div class="Come_ipt">
                      <el-input-number
                        placeholder="请输入"
                        v-model="ruleForm.confBasic"
                        :precision="0"
                        :min="0"
                        :max="1000000"
                        :controls="false"
                        class="text-left w-300"
                      ></el-input-number>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="基础贡献值" prop="salaryBasic">
                <div class="comeBox">
                  <div class="comeOn">
                    <div class="Come_ipt">
                      <el-input-number
                        placeholder="请输入"
                        v-model="ruleForm.salaryBasic"
                        :precision="0"
                        :min="0"
                        :max="1000000"
                        :controls="false"
                        class="text-left w-300"
                      ></el-input-number>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="超额步长" prop="manyStep">
                <div class="comeBox">
                  <div class="comeOn">
                    <div class="Come_ipt">
                      <el-input-number
                        placeholder="请输入"
                        v-model="ruleForm.manyStep"
                        :precision="2"
                        :max="1000000"
                        :controls="false"
                        class="text-left w-300"
                      ></el-input-number>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="超额贡献值" prop="maryContribute">
                <el-input-number
                  placeholder="请输入"
                  v-model="ruleForm.maryContribute"
                  :precision="2"
                  :min="0"
                  :max="100"
                  :controls="false"
                  class="w-200 text-left"
                ></el-input-number>
                <!-- <span class="percents">%</span> -->
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="超额上限类型" prop="maryType">
                <div>
                  <el-select
                    v-model="ruleForm.maryType"
                    placeholder="请选择"
                    class="w-300"
                  >
                    <el-option
                      v-for="item in TypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="超额上限值" prop="maryVal">
                <div class="freeze">
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleForm.maryVal"
                    :min="0"
                    :precision="0"
                    :step="1"
                    :controls="false"
                    class="w-300 text-left"
                  ></el-input-number>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="差额步长" prop="differStep">
                <div class="freeze">
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleForm.differStep"
                    :precision="2"
                    :step="1"
                    :controls="false"
                    class="w-300 text-left"
                  ></el-input-number>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="差额贡献值" prop="differContribute">
                <div class="freeze">
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleForm.differContribute"
                    :min="0"
                    :precision="2"
                    :step="1"
                    :controls="false"
                    class="w-300 text-left"
                  ></el-input-number>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :span="12">
            <el-col :span="6">
              <el-form-item label="差额下限类型" prop="differType">
                <el-select
                  v-model="ruleForm.differType"
                  placeholder="请选择"
                  class="w-300"
                >
                  <el-option
                    v-for="item in TypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="差额下限值" prop="differVal">
                <el-input-number
                  v-model="ruleForm.differVal"
                  :precision="0"
                  :step="1"
                  :min="0"
                  class="w-300 text-left"
                  :controls="false"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table_card_header">
        <span class="pl_left"></span>
        <div class="rules_title">业绩完成率</div>
      </div>
      <div class="postName_form">
        <el-form
          :model="ruleSoForm"
          :rules="rules"
          ref="ruleSoForm"
          label-width="120px"
          label-position="top"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="6">
              <el-form-item label="基础分值" prop="confBasic">
                <div class="comeBox">
                  <div class="comeOn">
                    <div class="Come_ipt">
                      <el-input-number
                        placeholder="请输入"
                        v-model="ruleSoForm.confBasic"
                        :precision="0"
                        :min="0"
                        :max="1000000"
                        :controls="false"
                        class="text-left w-300"
                      ></el-input-number>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="基础贡献值" prop="salaryBasic">
                <div class="comeBox">
                  <div class="comeOn">
                    <div class="Come_ipt">
                      <el-input-number
                        placeholder="请输入"
                        v-model="ruleSoForm.salaryBasic"
                        :precision="0"
                        :min="0"
                        :max="1000000"
                        :controls="false"
                        class="text-left w-300"
                      ></el-input-number>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="超额步长" prop="manyStep">
                <div class="comeBox">
                  <div class="comeOn">
                    <div class="Come_ipt">
                      <el-input-number
                        placeholder="请输入"
                        v-model="ruleSoForm.manyStep"
                        :precision="2"
                        :max="1000000"
                        :controls="false"
                        class="text-left w-300"
                      ></el-input-number>
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="超额贡献值" prop="maryContribute">
                <el-input-number
                  placeholder="请输入"
                  v-model="ruleSoForm.maryContribute"
                  :precision="2"
                  :min="0"
                  :max="100"
                  :controls="false"
                  class="w-200 text-left"
                ></el-input-number>
                <!-- <span class="percents">%</span> -->
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="超额上限类型" prop="maryType">
                <div>
                  <el-select
                    v-model="ruleSoForm.maryType"
                    placeholder="请选择"
                    class="w-300"
                  >
                    <el-option
                      v-for="item in TypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="超额上限值" prop="maryVal">
                <div class="freeze">
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleSoForm.maryVal"
                    :min="0"
                    :precision="0"
                    :step="1"
                    :controls="false"
                    class="w-300 text-left"
                  ></el-input-number>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="差额步长" prop="differStep">
                <div class="freeze">
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleSoForm.differStep"
                    :precision="2"
                    :step="1"
                    :controls="false"
                    class="w-300 text-left"
                  ></el-input-number>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="差额贡献值" prop="differContribute">
                <div class="freeze">
                  <el-input-number
                    placeholder="请输入"
                    v-model="ruleSoForm.differContribute"
                    :min="0"
                    :precision="2"
                    :step="1"
                    :controls="false"
                    class="w-300 text-left"
                  ></el-input-number>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :span="12">
            <el-col :span="6">
              <el-form-item label="差额下限类型" prop="differType">
                <el-select
                  v-model="ruleSoForm.differType"
                  placeholder="请选择"
                  class="w-300"
                >
                  <el-option
                    v-for="item in TypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="差额下限值" prop="differVal">
                <el-input-number
                  v-model="ruleSoForm.differVal"
                  :precision="0"
                  :step="1"
                  :min="0"
                  class="w-300 text-left"
                  :controls="false"
                  placeholder="请输入"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="el_btn_bottom">
          <el-button type="primary" @click="SaveParameter" :loading="loading"
            >保存</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
          
<script>
import { getSalaryConQuery, updateAddSalaryConf } from "@/api/bpm/salary";
import { getAllStorelists } from "@/api/business/order";
export default {
  name: "EryuoaStoregeneral",

  data() {
    return {
      multiple: true,
      ruleForm: {
        custStore: "",
        smsUser: "",
      },
      ruleSoForm: {},
      activeIndex: 1,
      MemberList: [], // 角色列表
      RoleForm: {},
      loading: false,
      rules: {
        confBasic: [{ required: true, message: "请输入", trigger: "blur" }],
        salaryBasic: [{ required: true, message: "请输入", trigger: "blur" }],
        manyStep: [{ required: true, message: "请输入", trigger: "blur" }],
        maryContribute: [
          { required: true, message: "请输入", trigger: "blur" },
        ],
        maryType: [{ required: true, message: "请选择", trigger: "blur" }],
        maryVal: [{ required: true, message: "请输入", trigger: "blur" }],
        differStep: [{ required: true, message: "请输入", trigger: "blur" }],
        differContribute: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        differType: [{ required: true, message: "请选择", trigger: "blur" }],
        differVal: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      // Y:限制;N:不限制
      TypeOptions: [
        {
          value: "Y",
          label: "限制",
        },
        {
          value: "N",
          label: "不限制",
        },
      ],

      // MoneyDownTypeOptions: [
      //   {
      //     value: "UP",
      //     label: ">",
      //   },
      //   {
      //     value: "EU",
      //     label: "≥",
      //   },
      // ],

      Rolerules: {
        roleStore: [{ required: true, message: "请选择角色", trigger: "blur" }],
        roleArtificer: [
          { required: true, message: "请选择角色", trigger: "blur" },
        ],
        roleReception: [
          { required: true, message: "请选择角色", trigger: "blur" },
        ],
        roleClean: [{ required: true, message: "请选择角色", trigger: "blur" }],
      },
    };
  },

  created() {
    this.getList();
  },

  mounted() {},

  methods: {
    SaveParameter() {
      this.$refs[("ruleForm", "ruleSoForm")].validate((valid) => {
        if (valid) {
          updateAddSalaryConf({
            cu: this.ruleForm,
            so: this.ruleSoForm,
          })
            .then((res) => {
              const { code } = res;
              if (code === 0) {
                this.getList();
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
              }
            })
            .catch((err) => {});  
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    resQ() {
      this.getList();
    },

    getList() {
      this.loading = true;
      getSalaryConQuery()
        .then((res) => {
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.ruleForm = data.cu;
            this.ruleSoForm = data.so;

            // this.ruleForm.confBasic = data.confBasic;
            // this.ruleForm.salaryBasic = data.salaryBasic;
            // this.ruleForm.manyStep = data.manyStep;
            // this.ruleForm.maryContribute = data.maryContribute;
            // this.ruleForm.maryType = data.maryType;
            // this.ruleForm.maryVal = data.maryVal;
            // this.ruleForm.differStep = data.differStep;
            // this.ruleForm.differContribute = data.differContribute;
            // this.ruleForm.differType = data.differType;
            // this.ruleForm.differVal = data.differVal;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    SethandleClose() {
      this.resetFormData("floorSortForm");
      this.$nextTick(() => {
        this.SetdialogVisible = false;
      });
    },

    // 表单重置
    resetFormData(formName) {
      // console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },
  },
};
</script>
          
  <style lang="scss" scoped>
.pl_left {
  padding-left: 24px;
}
.rules_title {
  font-weight: bolder;
  font-size: 18px;
}
.Parameter_form {
  padding-left: 20px;
  // padding-bottom: 100px;
  margin-top: 20px;
}
.ipt_iner {
  margin-top: 10px;
}

.table_card_header {
  background-color: #f7f8fa;
  padding: 5px 24px;
}

.comeBox {
  position: relative;
  .comeOn {
    display: flex;
    .Come_ipt {
      width: 80px;
      margin: 0 10px;
      .el-input-number {
        width: 80px;
      }
    }
    .percent {
      position: absolute;
      left: 620px;
    }
  }
}

.postName_form {
  padding-left: 20px;
  padding-bottom: 100px;
  margin-top: 20px;
  position: relative;
  .el_btn_bottom {
    position: absolute;
    left: 800px;
    bottom: 20px;
  }
}

.freeze {
  display: flex;
  .freeze_record {
    margin-left: 10px;
  }
}

.percents {
  padding-left: 10px;
}
</style>